<div class="layui-card">
    <div class="layui-card-header layuiadmin-card-header-auto">
        <form class="layui-form">
            <div class="layui-btn-group">
                <button type="submit" class="layui-btn layui-btn-sm layui-btn-normal" lay-submit lay-filter="*"><i class="layui-icon layui-icon-search"></i>搜索</button>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label for="" class="layui-form-label">呼叫时间：</label>
                    <div class="layui-input-inline" style="width: 300px">
                        <input type="text" id="calldate" name="calldate" readonly placeholder="请选择呼叫时间" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label for="" class="layui-form-label">分机号码：</label>
                    <div class="layui-input-inline">
                        <input type="text" name="extension" placeholder="请输入分机号码" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label for="" class="layui-form-label">姓名：</label>
                    <div class="layui-input-inline">
                        <input type="text" name="name" placeholder="请输入姓名" class="layui-input">
                    </div>
                </div>
            </div>
        </form>
    </div>
    <div class="layui-card-body">
        <table id="dataTable" lay-filter="dataTable"></table>
    </div>
</div>


<?php
$url = yii\helpers\Url::to(['extension']);

$js = <<<JS
    layui.use(['form','element','table', 'layer', 'laydate'],function() {
        var form = layui.form;  
        var element = layui.element;  
        var table = layui.table;  
        var layer = layui.layer;  
        var laydate = layui.laydate;
        
        var dataTable = table.render({
            elem: '#dataTable'
            ,height: 'full-200'
            ,url: '{$url}' 
            ,page: true 
            ,toolbar: false
            ,cols: [[ 
                {checkbox: true}
                ,{field: 'name', title: '姓名'}
                ,{field: 'extension', title: '分机号'}
                ,{field: 'total', title: '呼出总数'}
                ,{field: 'answered', title: '呼出接通数'}
                ,{field: 'percent', title: '接通率'}
                ,{field: 'thirty', title: '30秒以上通话'}
                ,{field: 'sixty', title: '60秒以上通话'}
                ,{field: 'sum', title: '累计时长'}
                ,{field: 'avg', title: '平均时长'}
            ]]
        });
        
        //监听表单提交
        form.on('submit(*)',function(data) {
            var where = data.field
            dataTable.reload({
                page : {curr : 1}
                ,where : where
            })
            return false
        })
        
        //呼叫时间范围
        laydate.render({
            elem: '#calldate'
            ,type: 'datetime'
            ,range: '-' 
        })
        
    });
JS;
$this->registerJs($js);
